<template>
    <div class="contentPage">
        <div class="pageTitle">资方列表</div>
        <Search :data="params.searchData" @search="getSearch"/>
        <div class="tableBox">
            <a-button type="primary" @click="addCustomer">
                <PlusOutlined/>
                新建资方
            </a-button>
            <a-table style="margin-top: 12px" :dataSource="params.dataSource" :columns="params.columns" row-key="id"
                     :pagination="false">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'operation'">
                        <div style="display: flex;">
                            <div class="linkBtn" @click="edit(record,1)">编辑</div>
                            <a-popconfirm
                                placement="left"
                                :title="'确认删除?'"
                                ok-text="是"
                                cancel-text="否"
                                @confirm="confirmFreeze(record)"
                            >
                                <div class="linkBtn" style="margin-left: 12px">
                                    删除
                                </div>
                            </a-popconfirm>
                        </div>
                    </template>
                </template>
            </a-table>
            <a-pagination style="margin-top: 12px" show-size-changer v-model:current="params.page"
                          :total="params.total" @showSizeChange="onShowSizeChange" @change="onShowPageChange"/>
        </div>
        <a-modal v-model:open="params.visible" :title="params.editId ? '编辑资方' : '新建资方'" @ok="handleOk" destroyOnClose width="700px">
            <a-form
                :model="params.formState"
                name="basic"
                ref="formRef"
                style="margin-top: 24px"
                :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"
                autocomplete="off"
            >
                <a-form-item label="资方名称" name="name" required>
                    <a-input v-model:value="params.formState.name"></a-input>
                </a-form-item>
                <a-form-item label="资方手机号" name="phone" required>
                    <a-input v-model:value="params.formState.phone"></a-input>
                </a-form-item>
                <a-form-item label="资方公司主体" name="capitalMainName">
                    <a-input v-model:value="params.formState.capitalMainName"></a-input>
                </a-form-item>
                <a-form-item label="资方资金成本" name="moneyRate">
                    <a-input v-model:value="params.formState.moneyRate" addon-after="%"></a-input>
                </a-form-item>
                <a-form-item label="开始合作日期" name="beginDate">
                    <a-date-picker style="width: 100%" v-model:value="params.formState.beginDate" value-format="YYYY-MM-DD"/>
                </a-form-item>
                <a-form-item label="资方后台密码" name="password">
                    <a-input v-model:value="params.formState.password"
                             autoComplete="new-password"></a-input>
                </a-form-item>
                <a-form-item label="备注" name="remark">
                    <a-textarea v-model:value="params.formState.remark"></a-textarea>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script setup>
import {reactive, onMounted, ref} from 'vue'
import {PlusOutlined} from '@ant-design/icons-vue'
import { capitalList, capitalAdd, capitalDelete} from '../../../api/project.js'
import Search from '../../../components/search/index.vue'
import {message} from "ant-design-vue";


const formRef = ref(null)
const params = reactive({
    visible: false,
    editId: '',
    page: 1,
    pageSize: 10,
    total: 11,
    selectedRowKeys: [],
    formState: {
        wonerIdcardImage:[null,null],
        userIdcardImage: [null,null],
        otherFileUrl:[{fileText:'',file:[],name:''}]
    },
    searchData: [
        {name: '资方编号', type: 'input', val: '', key: 'capitalNo'},
        {name: '项资方称', type: 'input', val: '', key: 'name'},
        {name: '资方手机号', type: 'input', val: '', key: 'phone'},
        {name: '资方公司主体', type: 'input', val: '', key: 'capitalMainName'},
        {name: '新建时间', type: 'picker', val: [], key: ['createdAtLeft', 'createdAtRight']},
    ],
    searchVal: {},
    dataSource: [],
    columns: [
        {title: '资方编号', dataIndex: 'capital_no', key: 'capital_no'},
        {title: '资方名称', dataIndex: 'name', key: 'name'},
        {title: '资方手机号', dataIndex: 'phone', key: 'phone'},
        {title: '资方公司主体', dataIndex: 'capital_main_name', key: 'capital_main_name'},
        {title: '资方资金成本', dataIndex: 'money_rate', key: 'money_rate'},
        {title: '备注', dataIndex: 'remark', key: 'remark'},
        {title: '开始合作日期', dataIndex: 'begin_date', key: 'begin_date'},
        {title: '新建时间', dataIndex: 'created_at', key: 'created_at'},
        {title: '操作', dataIndex: 'operation', key: 'operation'},
    ],
    userList: [],
    regionList: [],
    pickUpList: [],
    groupList: [],
})
onMounted(() => {
    getList()
})
const onShowPageChange = (page) => {
    params.page = page
    getList()
}
const onShowSizeChange = (current, pageSize) => {
    params.pageSize = pageSize;
    getList()
}
const getList = () => {
    let data = {
        ...params.searchVal,
        page: params.page,
        pageSize: params.pageSize,
    }
    capitalList(data).then(res => {
        params.dataSource = res.data.items
        params.total = res.data.total
    })
}
const openModal = () => {
    params.visible = true
}
const addCustomer = () => {
    params.editId = ''
    params.formState.name = ''
    params.formState.phone = ''
    params.formState.capitalMainName = ''
    params.formState.moneyRate = ''
    params.formState.password = ''
    params.formState.remark = ''
    openModal()
}
const onSelectChange = (selectedRowKeys) => {
    params.selectedRowKeys = selectedRowKeys;
};
const edit = (item) => {
    params.editId = item.id
    params.formState.phone = item?.phone
    params.formState.name = item.name
    params.formState.capitalMainName = item?.capital_main_name
    params.formState.moneyRate = item?.money_rate
    params.formState.password = item?.password
    params.formState.remark = item.remark
    params.formState.beginDate = item.begin_date
    openModal()
}
const confirmFreeze = (record) =>{
    capitalDelete({ids:[record.id]}).then(res=>{
        if (res?.code === 200) {
            getList()
            message.success(res.message)
        } else {
            message.error(res.message)
        }
    })
}
const handleOk = () => {
    let config = JSON.parse(JSON.stringify(params.formState))
    formRef.value.validate().then(() => {
        if(params.editId) {
            config.id = params.editId
        }
        capitalAdd(config).then(res => {
            if (res?.code === 200) {
                params.visible = false
                getList()
                message.success(res.message)
            } else {
                message.error(res.message)
            }
        })
    })

}
const getSearch = (e) => {
    params.searchVal = e
    getList()
}
</script>
<style scoped lang="less">
@import "./style.less";
</style>
